<div class="row comments">
  <div class="col-sm-12">
    <div *ngFor="let comment of model.comments; let i = index;" class="item">
      <div>
        <span class="avatar">
          <img src="{{ comment.userAvatar | imgPath }}" class="">
        </span>
        <span class="summary">
          {{comment.userName}} {{comment.summary}} - {{comment.updateTime | timePassed}}
        </span>
      </div>
      <div>{{comment.content}}</div>

      <div class="edit">
        <span *ngIf="comment.userId==userId" (click)="editComments(comment, i)" class="link"><i class="fa fa-pencil"></i></span>
        <span *ngIf="comment.userId==userId" (click)="removeComments(comment, i)" class="link"><i class="fa fa-trash"></i></span>
      </div>
    </div>
    <div class="buttons">
      <button *ngIf="!viewOnly" (click)="addComments()" type="button" class="btn btn-secondary btn-with-icon btn-sm">
        <i class="fa fa-commenting-o"></i>备注
      </button>
    </div>
  </div>
</div>

<comment-edit (confirm)="saveComments()" [(model)]="comment" #modalWrapper></comment-edit>
